<template>
  <footer class="bg-dark text-light py-5">
    <div class="container">
      <div class="row">
        <!-- 平台信息 -->
        <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
          <h5 class="mb-3">
            <i class="bi bi-building me-2"></i>校园服务平台
          </h5>
          <p class="small">
            专为校园用户打造的综合信息服务平台，提供二手交易、失物招领、兼职信息、学习交流等全方位服务。
          </p>
          <div class="mt-3">
            <small class="text-muted">© 2025 校园服务平台</small>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
          <h5 class="mb-3">快速链接</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="/" class="text-light text-decoration-none">首页</a></li>
            <li class="mb-2"><a href="live/Market" class="text-light text-decoration-none">二手市场</a></li>
            <li class="mb-2"><a href="live/LostFound" class="text-light text-decoration-none">失物招领</a></li>
            <li class="mb-2"><a href="chance/Woek" class="text-light text-decoration-none">兼职实习</a></li>
            <li class="mb-2"><a href="chance/Study" class="text-light text-decoration-none">学习交流</a></li>
          </ul>
        </div>

        <!-- 用户服务 -->
        <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
          <h5 class="mb-3">用户服务</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="/login" class="text-light text-decoration-none">用户登录</a></li>
            <li class="mb-2"><a href="/register" class="text-light text-decoration-none">用户注册</a></li>
            <li class="mb-2"><a href="/user/profile" class="text-light text-decoration-none">个人中心</a></li>
            <li class="mb-2"><a href="/user/help" class="text-light text-decoration-none">帮助中心</a></li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
          <h5 class="mb-3">联系我们</h5>
          <ul class="list-unstyled">
            <li class="mb-2">
              <i class="bi bi-geo-alt me-2"></i>
              <span>成理工程计算机学院</span>
            </li>
            <li class="mb-2">
              <i class="bi bi-envelope me-2"></i>
              <span>lyc1828@gmail.com</span>
            </li>
            <li class="mb-2">
              <i class="bi bi-telephone me-2"></i>
              <span>0833-7820888</span>
            </li>
          </ul>
          <!-- 社交媒体图标 -->
          <div class="mt-3">
            <a href="#" class="text-light me-3" title="支付宝"><i class="bi bi-wallet2"></i></a>
            <a href="#" class="text-light me-3" title="微信"><i class="bi bi-wechat"></i></a>
            <a href="#" class="text-light me-3" title="QQ"><i class="bi bi-tencent-qq"></i></a>
            <a href="#" class="text-light" title="GitHub"><i class="bi bi-github"></i></a>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <hr class="my-4 bg-secondary">

      <!-- 版权信息 -->
      <div class="row align-items-center">
        <div class="col-md-6 text-center text-md-start">
          <p class="mb-0 small">
            &copy; 2025 校园服务平台 版权所有 | 
            <a href="#" class="text-light text-decoration-none">隐私政策</a> | 
            <a href="#" class="text-light text-decoration-none">服务条款</a>
          </p>
        </div>
        <div class="col-md-6 text-center text-md-end">
          <p class="mb-0 small">
            <i class="bi bi-shield-check me-1"></i>京ICP备202500000001号 | 
            <i class="bi bi-phone me-1"></i>京公网安备11000002000001号
          </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 页脚组件不需要额外的逻辑
</script>

<style scoped>
footer {
  background: linear-gradient(135deg, #2c3e50, #1a2a3a);
  color: #f8f9fa;
}

h5 {
  position: relative;
  padding-bottom: 10px;
}

h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #3498db;
}

a {
  transition: all 0.3s ease;
}

a:hover {
  color: #3498db !important;
  transform: translateX(5px);
}

.list-unstyled li {
  position: relative;
  padding-left: 15px;
}

.list-unstyled li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3498db;
}

hr {
  opacity: 0.2;
}
</style>